<template>
  <div class="app-container">
    <el-container>
      <el-aside width="350px" style="background: white">
        <el-menu default-active="1-1" class="el-menu-vertical-demo" @select="onSelect">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-notebook-2" />
              <span slot="title">{{ $t('openapi.doc.introduction') }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">{{ $t('openapi.doc.abstract') }}</el-menu-item>
              <el-menu-item index="1-2">{{ $t('openapi.doc.pact') }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-notebook-2" />
              <span slot="title">{{ $t('openapi.doc.appDeveloper') }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">Http</el-menu-item>
              <el-menu-item index="2-2">WebSocket</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-notebook-2" />
              <span slot="title">服务端API</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">共享用户</el-menu-item>
              <el-menu-item index="3-2">获取数据点</el-menu-item>
              <el-menu-item index="3-2">下达设备指令</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <div v-html="currentContentHtml" />
        </el-main>
      </el-container>
    </el-container>
    <markdown-editor ref="markdownEditor" v-model="currentContentRaw" hidden />
  </div>
</template>

<script>

import MarkdownEditor from '@/components/MarkdownEditor'
import { getDoc } from '@/api/doc'
export default {
  name: 'OpenApiDoc',
  components: { MarkdownEditor },
  data() {
    return {
      // 当前文档的函数指针
      currentContentRaw: '###Loading..',
      currentContentHtml: ''
    }
  },
  created() {
    this.getHtml()
  },
  methods: {
    getHtml() {
      this.loadDoc('1-1' + this.$t('openapi.doc.language') + '.md')
    },
    loadDoc(chapter) {
      getDoc(chapter).then(res => {
        this.currentContentRaw = res
        this.$nextTick(() => {
          this.currentContentHtml = this.$refs.markdownEditor.getHtml()
        })
      })
    },
    onSelect(e) {
      this.loadDoc(e + '.md')
    }
  }
}
</script>
